<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { WarehousePageApi, DeleteApi, AddApi, UpdateApi } from '@/api/warehouse_local'
import { QueryPageApi } from '@/api/warehouse'
import{QueryArea}from '@/api/warehouse_area'
const fetchWarehouseList = async () => {
  try {
    
    const res = await QueryPageApi(1, 1000, '', '')
    if (res.code) {
      warehouseList.value = res.data.list
    }
  } catch (error) {
    ElMessage.error('获取仓库列表失败')
  }
}

// 搜索表单
const areaform = ref({
  warehouseAreaName: '',
  warehouseName: ''
})

// 分页数据
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const currentPage = ref(1)

const disForm=ref({
  warehouseName:'',
  warehouseAreaName:'',
  cacategory:'',
  locaCode:'',
  locaLen: null,
  locaWidth: null,
  locaHeight: null,
  localVolume: null,
  localBearingCapacity: null,
  tunnelNumber: '',
  shelfNumber: '',
  layerNumber: '',
  saasId: '',
  isDel: 0
})
// 对话框相关
const dialogVisible = ref(false)
const formLoading = ref(false)
const isEdit = ref(false)
const currentEditId = ref(null)
const warehouseList = ref([])
// 表单数据
const form = ref([])

// 查询功能
const search = async () => {
  try {
    const result = await WarehousePageApi(
      page.value,
      pageSize.value,
      areaform.value.warehouseAreaName,
      areaform.value.warehouseName
    )
    
    if (result.code) {
      tableData.value = result.data.list || []
      total.value = result.data.total || 0
    } else {
      tableData.value = result.list || []
      total.value = result.total || 0
    }
  } catch (error) {
    ElMessage.error('查询失败: ' + error.message)
    tableData.value = []
    total.value = 0
  }
}

// 新增功能
const add = () => {
  isEdit.value = false
  currentEditId.value = null
  disForm.value = {
    warehouseAreaName: '',
    warehouseName: '',
    category: '',
    locaCode: '',
    locaLen: null,
    locaWidth: null,
    locaHeight: null,
    localVolume: null,
    localBearingCapacity: null,
    tunnelNumber: '',
    shelfNumber: '',
    layerNumber: '',
    saasId: '',
    isDel: 0
  }
  dialogVisible.value = true
}

// 编辑功能
const handleEdit = (row) => {
  isEdit.value = true
  currentEditId.value = row.id
  form.value = { ...row }
  dialogVisible.value = true
}

// 删除功能
const handleDelete = async(index,row) => {
 let res=await DeleteApi(row.id)
 search()
}

// 保存功能
const save = async () => {
  if (formLoading.value) return
  
  try {
    formLoading.value = true
    let result
    
    if (isEdit.value) {
      // 编辑模式
      const updateData = { ...form.value, id: currentEditId.value }
      result = await UpdateApi(updateData)
    } else {
      // 新增模式
      result = await AddApi(disForm.value)
    }
    
    if (result.code) {
      ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
      dialogVisible.value = false
      search()
    } else {
      ElMessage.error(result.message || (isEdit.value ? '修改失败' : '添加失败'))
    }
  } catch (error) {
    ElMessage.error((isEdit.value ? '修改失败: ' : '添加失败: ') + error.message)
  } finally {
    formLoading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 重置搜索
const resetSearch = () => {
  areaform.value.warehouseAreaName = ''
  areaform.value.warehouseName = ''
  page.value = 1
  search()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  search()
}

const handleCurrentChange = (val) => {
  page.value = val
  search()
}

onMounted(() => {
  search()
   fetchWarehouseList()
})
</script>

<template>
  <div class="contai">
  <!--搜索栏-->
  <el-form :model="areaform" :inline="true" label-width="auto" style="max-width: 600px">
    <el-form-item>
      <el-input v-model="areaform.warehouseAreaName" placeholder="库区名称"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="areaform.warehouseName" placeholder="仓库名称" clearable/>
    </el-form-item>
    <el-button type="success" @click="search">查询</el-button>
    <el-button type="primary" @click="resetSearch">重置</el-button>
    <el-button type="success" @click="add">+</el-button>
  </el-form>

  <!--表格数据-->
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column type="selection" width="55px" />
    <el-table-column prop="id" label="#" width="55px" />
    <el-table-column prop="warehouseName" label="仓库名称" width="120" />
    <el-table-column prop="warehouseAreaName" label="库区名称" width="120" />
    <el-table-column prop="category" label="库区类型" width="100" />
    <el-table-column prop="locaCode" label="库位编码" width="120" />
    <el-table-column prop="locaLen" label="库位长(m)" width="100" />
    <el-table-column prop="locaWidth" label="库位宽(m)" width="100" />
    <el-table-column prop="locaHeight" label="库位高(m)" width="100" />
    <el-table-column prop="localVolume" label="库位容积(m³)" width="120" />
    <el-table-column prop="localBearingCapacity" label="库位承重(kg)" width="120" />
    <el-table-column prop="tunnelNumber" label="巷道号" width="80" />
    <el-table-column prop="shelfNumber" label="货架号" width="80" />
    <el-table-column prop="layerNumber" label="层号" width="80" />
    <el-table-column prop="saasId" label="位号" width="80" />
    <el-table-column label="是否有效" width="100">
      <template #default="scope">
        <el-tag v-if="scope.row.isDel === 0" type="success">有效</el-tag>
        <el-tag v-else type="danger">无效</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150" fixed="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <!--分页-->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    style="margin-top: 20px; justify-content: center;"
  />

  <!--对话框-->
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑库位' : '新增库位'"
    width="700px"
    :before-close="handleClose"
  > <el-form :model="disForm"  style="max-width: 1000px">
       <el-row :gutter="20">
    <el-col :span="24">
    <el-form-item>
       <el-select v-model="disForm.warehouseName" placeholder="仓库名称">
                <el-option
                  v-for="warehouse in warehouseList"
                  :key="warehouse.id"
                  :label="warehouse.name"
                  :value="warehouse.name"
                />
              </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="24">
     <el-form-item>
      <el-input v-model="disForm.warehouseAreaName" placeholder="库区名称"/>
    </el-form-item>
    </el-col>
    <el-col :span="24">
     <el-form-item>
      <el-input v-model="disForm.cacategory" placeholder="库区类型"/>
    </el-form-item>
    </el-col>
    <el-col :span="24">
   <el-form-item>
      <el-input v-model="disForm.locaCode" placeholder="库位编码"/>
    </el-form-item>
    </el-col>
     <el-col :span="24">
   <el-form-item>
      <el-input v-model="disForm.locaLen" placeholder="库位长度"/>
    </el-form-item>
    </el-col>
     <el-col :span="24">
    <el-form-item>
      <el-input v-model="disForm.locaWidth" placeholder="库区宽"/>
    </el-form-item>
    </el-col>
     <el-col :span="24">
   <el-form-item>
      <el-input v-model="disForm.locaHeight" placeholder="库区长"/>
    </el-form-item>
    </el-col>
     <el-col :span="24">
     <el-form-item>
      <el-input v-model="disForm.localVolume" placeholder="库区容积"/>
    </el-form-item>
    </el-col>
     <el-col :span="24">
   <el-form-item>
      <el-input v-model="disForm.localBearingCapacity" placeholder="库位承重"/>
    </el-form-item>
    </el-col>
      <el-col :span="24">
     <el-form-item>
      <el-input v-model="disForm.tunnelNumber" placeholder="巷道号"/>
    </el-form-item>
    </el-col>
      <el-col :span="24">
   <el-form-item>
      <el-input v-model="disForm.shelfNumber" placeholder="货架号"/>
    </el-form-item>
    </el-col>
      <el-col :span="24">
    <el-form-item>
      <el-input v-model="disForm.layerNumber" placeholder="层号"/>
    </el-form-item>
    </el-col>
      <el-col :span="24">
     <el-form-item>
      <el-input v-model="disForm.saasId" placeholder="位号"/>
    </el-form-item>
    </el-col>
  <el-col :span="24">
  </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="save" 
          :loading="formLoading"
        >
          {{ isEdit ? '修改' : '新增' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>